<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>我为电信光网宽带代言</title>
    <script src="__HUI__lib/jquery/1.9.1/jquery.min.js"></script>
    <script src="__MUI__js/mui.min.js"></script>
    <link href="__MUI__css/mui.min.css" rel="stylesheet" />
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <link href="__HCSS__style.css" rel="stylesheet" />
    <link rel="stylesheet" href="__HCSS__index.css">
    <!--<script src="__HJS__selpic.js" charset="gb2312">-->
    <script type="text/javascript" src="__HJS__uploadImage.js" ></script>
    <script type="text/javascript" src="__HJS__exif.js" ></script>

    <script>
        mui.init({
            gestureConfig: {
                longtap: true
            },
            swipeBack: true //启用右滑关闭功能
        });

        $(function() {
            var submit = $('.action');
            doBtn(submit, '请先选择图片',false);
            submit.bind('click', function() {
                $('.filebox span').removeClass('mui-icon-checkmarkempty').addClass('mui-spinner');
                doBtn(submit, '正在拼命制作中...',false);
                $('form').submit();
            });
            $('.file').change(function() {
                var file = $('.file').val();
                if (file) {
                    $('.filebox span').removeClass('mui-icon-plus').addClass('mui-icon-checkmarkempty');
                    doBtn(submit, '生成我的海报',true);
                }
            });
        });

        function doBtn(obj, str, openOrClose) {
            if (openOrClose) {
                obj.removeAttr('disabled');
                obj.html(str);
            } else {
                obj.attr('disabled', 'disabled');
                obj.html(str);
            }
        }

        //此方法为file input元素的change事件
//        function change(){
//
//            var file = this.files[0];
//            var orientation;
//            //EXIF js 可以读取图片的元信息 https://github.com/exif-js/exif-js
//            EXIF.getData(file,function(){
//                orientation=EXIF.getTag(this,'Orientation');
//            });
//            var reader = new FileReader();
//            reader.onload = function(e) {
//                getImgData(this.result,orientation,function(data){
//                    //这里可以使用校正后的图片data了
//                });
//            }
//            reader.readAsDataURL(file);
//        }
//
//        // @param {string} img 图片的base64
//        // @param {int} dir exif获取的方向信息
//        // @param {function} next 回调方法，返回校正方向后的base64
//        function getImgData(img,dir,next){
//            var image=new Image();
//            image.onload=function(){
//                var degree=0,drawWidth,drawHeight,width,height;
//                drawWidth=this.naturalWidth;
//                drawHeight=this.naturalHeight;
//                //以下改变一下图片大小
//                var maxSide = Math.max(drawWidth, drawHeight);
//                if (maxSide > 1024) {
//                    var minSide = Math.min(drawWidth, drawHeight);
//                    minSide = minSide / maxSide * 1024;
//                    maxSide = 1024;
//                    if (drawWidth > drawHeight) {
//                        drawWidth = maxSide;
//                        drawHeight = minSide;
//                    } else {
//                        drawWidth = minSide;
//                        drawHeight = maxSide;
//                    }
//                }
//                var canvas=document.createElement('canvas');
//                canvas.width=width=drawWidth;
//                canvas.height=height=drawHeight;
//                var context=canvas.getContext('2d');
//                //判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式
//                switch(dir){
//                    //iphone横屏拍摄，此时home键在左侧
//                    case 3:
//                        degree=180;
//                        drawWidth=-width;
//                        drawHeight=-height;
//                        break;
//                    //iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
//                    case 6:
//                        canvas.width=height;
//                        canvas.height=width;
//                        degree=90;
//                        drawWidth=width;
//                        drawHeight=-height;
//                        break;
//                    //iphone竖屏拍摄，此时home键在上方
//                    case 8:
//                        canvas.width=height;
//                        canvas.height=width;
//                        degree=270;
//                        drawWidth=-width;
//                        drawHeight=height;
//                        break;
//                }
//                //使用canvas旋转校正
//                context.rotate(degree*Math.PI/180);
//                context.drawImage(this,0,0,drawWidth,drawHeight);
//                //返回校正图片
//                next(canvas.toDataURL("image/jpeg",.8));
//            }
//            image.src=img;
//        }

    </script>

</head>

<body>

<!--导航-->
<div class="mui-content" style="height: 44px">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">制作电信光网宽带代言海报</h1>
</div>
<div class="mui-content_box">
    <div class="mui-content-padded">
        <form action="{:U('makeDo')}" method="post" enctype="multipart/form-data">
            <h4>您的大名：</h4>
            <div class="mui-input-row">
                <input type="text" class="mui-input-text" name="name">
            </div>
            <h4>您的靓照：</h4>
            <div class="mui-text-center">
                <a href="#" class="mui-input-tex filebox">
                    <span class="mui-icon mui-icon-plus plus"></span>
                    <input type="file" class="mui-input-tex file" accept="image/*;capture=camera" name="file" value="浏览" onchange="selectFileImage(this);">
                </a>
            </div>
            <!--//获取图片的方向-->
            <input type="hidden" id="direction" name="direction"/>
            <button type="button" class="mui-btn mui-btn-warning action">生成海报</button>
        </form>
    </div>
</div>
<div class="dis">
    <p>
        安康电信光网宽带产品在创新中不断前行 <br/>
        打造智慧家庭为你我幸福加速<br/>
        引领光网新时代，共创智慧安康
    </p>

</div>
<div class="dis_II">
    <img src="__HIMG__dis_II.jpg" alt=""/>
</div>
</body>
</html>

</html>